<template>
  <div>
    <el-row>
      <el-col :span="16" :offset="4">
        <div style="margin-top: 50px;text-align: left">
          <div class="container">
            <div class="block">
              <el-date-picker
                v-model="year"
                type="year"
                placeholder="选择年">
              </el-date-picker>
              <el-button type="success" style="margin-left: 20px" @click="search">搜索</el-button>
              <el-button type="danger" style="margin-left: 250px" @click="center=true">新增月份</el-button>
              <el-dialog
                title="增加月份的签到数"
                :visible.sync="center"
                width="30%"
                center>

                <div>
                  <el-form :model="add_days" status-icon label-width="100px">

                    <el-form-item label="年份月份" prop="checkPass">
                      <div style="text-align: center">
                        <el-date-picker
                          v-model="add_year"
                          type="month"
                          placeholder="选择月">
                        </el-date-picker>
                      </div>
                    </el-form-item>

                    <el-form-item label="签到天数" prop="checkPass">
                      <el-input type="text" v-model.number="add_days" autocomplete="off" ></el-input>
                    </el-form-item>
                  </el-form>

                </div>
                <div>
                </div>
                <span slot="footer" class="dialog-footer">
    <el-button @click="center = false">取 消</el-button>
    <el-button type="primary" @click="addmonth">确 定</el-button>
  </span>
              </el-dialog>


            </div>
          </div>
        </div>
        <div>

        </div>
      </el-col>
      <el-col :span="16" :offset="4">
        <template>
          <el-table
            height="450"
            :data="tableData"
            style="width: 100%">
            <el-table-column
              label="年月"
              width="150"
            >
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.year_month|dataYM }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="应签到天数"
              width="150"
              prop="sign_days">
            </el-table-column>
            <el-table-column
              align="right">
              <template slot="header" slot-scope="scope">
                操作
              </template>
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="tanEdit(scope.$index, scope.row)">修改
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-dialog
            title="每月应签到天数"
            :visible.sync="dialogVisible"
            width="30%">
            <el-form :model="row" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                     class="demo-ruleForm">
              <el-form-item label="年份月份" prop="pass">
                <h3>{{row.year_month|dataYM}}</h3>
              </el-form-item>
              <el-form-item label="签到天数" prop="checkPass">
                <el-input type="text" v-model.number="row.sign_days" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleEdit">确 定</el-button>
  </span>
          </el-dialog>
        </template>
      </el-col>

    </el-row>
  </div>
</template>

<script>

  import Vue from 'vue'
  import moment from 'moment'

  Vue.filter('dataYM', (input, formatString = 'YYYY-MM') => {
    return moment(input).format(formatString)
  })
  export default {
    name: 'MonthSignCountView',
    data () {
      return {
        year: '',
        tableData: [],
        row: '',
        dialogVisible: false,
        add_year: '',
        center: false,
        add_days: ''
      }
    }
    ,
    methods: {
      get_data () {
        this.$axios({
          url: this.$settings.base_url + '/user/monthsigncount/?first=1',
          method: 'get'
        }).then(res => {
          this.tableData = res.data.data
        })

      },
      search () {
        this.year = this.$moment(this.year).format('YYYY')
        this.$axios({
          url: this.$settings.base_url + '/user/monthsigncount/',
          method: 'get',
          params: { 'year': this.year }
        }).then(res => {
          if (res.data.code === 100) {
            this.$message.success(`${this.year}年记录搜索成功`)
            this.year = ''
            this.tableData = res.data.data
          }
        })

      },
      addmonth () {
        if(this.add_year===''||this.add_days===''){
          this.$message.error('请检查月份和签到天数')
        }else {
          this.$axios({
            url:this.$settings.base_url+'/user/monthsigncount/',
            method:'post',
            data:{'year':this.$moment(this.add_year).format('YYYY-MM-DD'),'days':this.add_days}
          }).then(res=>{
            if (res.data.code===100){
              this.$message.success('增加月份签到天数成功')
              this.add_days=''
              this.add_year=''
              this.center=false
              this.get_data()
            }else {
              this.$message.error(`${res.data.error}`)
            }
          })

        }
      },
      tanEdit (index, row) {
        this.dialogVisible = true
        this.row = row
      },
      handleEdit () {
        if (this.row.sign_days === '' || this.row.sign_days >= 30) {
          this.$message.error('输入的签到天数有问题')
        } else {
          this.$axios({
            url: this.$settings.base_url + '/user/monthsigncount/',
            method: 'put',
            data: { row: this.row }
          }).then(res => {
            if (res.data.code === 100) {

              this.dialogVisible = false
              this.row = ''
              this.$message.success('修改成功')
              this.get_data()
            } else {
              this.$message.error('修改失败')
            }
          })
        }

      },

    },
    mounted () {
      this.get_data()
    }
  }
</script>

<style scoped>

</style>
